<template>
	<view class="mine-page">
		<!-- 用户信息 -->
		<view class="center-content">
			<view class="imgs">
				<image width="80" height="80" src="../../static/doc.png" />
				<view @click="gologin">
					<span>{{name}}</span><br>
					<p>ip归属地：{{home}}</p>
				</view>
			</view>
			<view class="text">
				<span>智慧医药 科技改变未来</span>
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="up-content">
			<view class="up-text" @click="goorder">
				<span>我的订单</span>
				<view>
					<span>查看全部</span>
					<van-icon name="arrow" size="10px" />
				</view>
			</view>
			<!-- icon -->
			<van-grid style="display: flex;justify-content: center;">
				<van-grid-item icon="bag-o" text="全部" @click="allpage('a')" />
				<van-grid-item icon="gold-coin-o" text="待付款" @click="allpage('b')" />
				<van-grid-item icon="logistics" text="待发货" @click="allpage('c')" />
				<van-grid-item icon="send-gift-o" text="待收获" @click="allpage('d')" />
			</van-grid>

		</view>
		<!-- 轮播图 -->
		<van-swipe :autoplay="3000" lazy-render style="height: 340rpx;">
			<van-swipe-item v-for="image in images" :key="image">
				<img :src="image" style="width: 100%;height: 340rpx;" />
			</van-swipe-item>
		</van-swipe>
		<!-- 其它 -->
		<view class="root-wrap">
			<!-- 地址管理 -->
			<view class="root" @click="goaddr">
				<view style="display: flex;align-items: center;">
					<van-icon name="location-o" size="20" />
					<text style="font-size: 30rpx;margin-left: 20rpx;">收获地址</text>
				</view>
				<van-icon name="arrow" />
			</view>
			<!-- 更换密码  navigator路径跳转 open-type跳转方式：navigate（默认值）-->
			<view class="root" @click="gocollect">
				<view style="display: flex;align-items: center;">
					<van-icon name="like-o" size="20" />
					<text style="font-size: 30rpx;margin-left: 20rpx;">我的收藏</text>
				</view>
				<van-icon name="arrow" />
			</view>
			<!-- 我的足迹 -->
			<view class="root" @click="gofoot">
				<view style="display: flex;align-items: center;">
					<van-icon name="eye-o" size="20" />
					<text style="font-size: 30rpx;margin-left: 20rpx;">我的足迹</text>
				</view>
				<van-icon name="arrow" />
			</view>
			<!-- 账号和安全 -->
			<view class="root" @click="gosecure">
				<view style="display: flex;align-items: center;">
					<van-icon name="shield-o" size="20" />
					<text style="font-size: 30rpx;margin-left: 20rpx;">账号和安全</text>
				</view>
				<van-icon name="arrow" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useStore
	} from 'vuex'
	import {
		onShow
	} from '@dcloudio/uni-app';
	import api from './../../lib/request.js'
	import {
		ref
	} from 'vue'
	import {
		onLoad,
	} from "@dcloudio/uni-app";
	import {
		showDialog
	} from 'vant';
	// 轮播图
	let images = ref([
		'../../static/one.jpg/',
		'../../static/two.png',
		'../../static/thr.png'
	])

	let store = useStore()
	let id = ''
	let name = '未登录'
	let home = ''

	// 去登录
	const gologin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}

	// 前往订单列表
	function goorder() {
		uni.navigateTo({
			url: '/pages/order/order'
		})
	}

	// 判断有没有登录
	let token = uni.getStorageSync('token')
	onShow(() => {
		if (token) {
			id = store.state.uid
			name = store.state.name
			home = store.state.home
		}
	})

	// 订单icon跳转
	function allpage(a) {
		let url = '/pages/order/order?id=' + a
		determine(url)
	}

	// 地址
	function goaddr() {
		let url = '/pages/addr/addr'
		determine(url)
	}
	// 收藏
	function gocollect() {
		let url = '/pages/collect/collect'
		determine(url)
	}
	//足迹
	function gofoot() {
		let url = '/pages/foot/foot'
		determine(url)
	}
	// 账号和安全
	function gosecure() {
		let url = '/pages/update-pass/update-pass'
		determine(url)
	}
	// 判断登录
	function determine(url) {
		if(!token){
			showDialog({
			  message: '未登录，请先登录',
			}).then(() => {
			  uni.navigateTo({
			  	url:'/pages/login/login'
			  })
			});
		}else{
		uni.navigateTo({
			url: url
		})
		}

	}
</script>

<style>
	.mine-page {
		height: 100vh;
		padding-top: 10px;
		box-sizing: border-box;
		background-image: url(../../static/bg.jpg);
		background-image: linear-gradient(to bottom, rgb(0, 183, 255) 20%, transparent 0);
	}

	.center-content {
		margin: auto;
		width: 700rpx;
		margin-top: 80rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 8px 2px #ccc;
		display: flex;
		flex-wrap: wrap;
		align-content: space-around;
		position: relative;

	}

	.imgs {
		display: flex;
		padding: 0 30rpx;

	}

	.imgs>view {
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.imgs p {
		font-size: 30rpx;
		color: #8a8a8a;
	}

	.center-content>.text {
		width: 100%;
		height: 80rpx;
		background-color: #8a8a8a;
		background-image: linear-gradient(to right, #FAE8C0 20%, #EFCF88);
		color: rgb(180, 124, 47);
		font-weight: 350;
		position: absolute;
		bottom: 0;
		display: flex;
		align-items: center;
		border-radius: 10rpx;

	}

	.text>span {
		font-size: 10rpx;
		margin-left: 40rpx;
	}

	.center-content image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		border: 5px solid #fff;
		margin-right: 20rpx;
		margin-bottom: 90rpx;
	}

	.center-content span {
		font-weight: bolder;
		font-size: 40rpx;
	}

	/* 我的服务 */
	.up-content {
		margin-top: 20rpx;
		padding: 0 10rpx;
	}

	.up-text {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		align-items: center;
	}





	/* 轮播图 */
	.van-swipe {
		margin-top: 30rpx;
		border-radius: 20rpx;
	}

	/* 其它 */
	.root-wrap {
		height: 500rpx;
	}

	.mine-page {
		/* background-color: bisque; */
		height: calc(100vh - 94px);
		padding-top: 10px;
		box-sizing: border-box;
	}

	.info-wrap {
		padding: 20px;
		background-color: #F8F8F8;
		display: flex;

	}

	.info-wrap>image {
		width: 160rpx;
		height: 160rpx;
	}

	.info-wrap>text {
		font-size: 44rpx;
		font-weight: bold;
		margin-left: 20px;
		margin-top: 10px;
	}

	.mine-item {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #ccc;
	}

	/* 更换密码 */
	.mine-page {
		/* background-color: bisque; */
		height: calc(100vh - 94px);
		padding-top: 10px;
		box-sizing: border-box;
	}

	.root {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		border-bottom: 1px solid rgb(245, 245, 245);
		width: 700rpx;
		margin: auto;
	}
</style>